@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Oleo+Script);

.uphbtn{
	position: relative;
	box-sizing: border-box;
	width: 3.5vw;
	height: 3.5vw;
	border-radius: 1vh;
	box-shadow: 0 0 2px 0 rgb(160, 170, 140);
	z-index: 3000;
	padding-top: 1vw;
	text-align: center;
	background-size: 100% 100%;
	font-size: 1vw;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}


.header-img-container{
	position: fixed;
	box-sizing: border-box;
	width: 50%;
	height: 70%;
	padding: 0;
	top: calc(100% / 2 - 35%);
	left: calc(100% / 2 - 25%);
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,.6),
				0 0 2px 0 rgba(0,0,0,.5) inset;
	border-radius: 1.5vh;
	z-index: 10000;
}
.header-img-container *{
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.header-img-container *{
	font-family: 'Oleo Script',Consolas,'黑体',sans-serif;
	font-size: 16px;
}
.header-img-container::before{
	position: absolute;
	z-index: -100;
	top: -22%;
	left: -50%;
	content: "";
	width: 100vw;
	height: 102vh;
	background: rgba(80,70,75,.6);
	-webkit-filter: blur(2px) brightness(.2);
	-moz-filter: blur(2px) brightness(.2);
	-o-filter: blur(2px) brightness(.2);
	filter: blur(2px) brightness(.2) Blur(2px) light(.2);
}
.header-img-container>#header-uploader-close-btn{
	position: absolute; z-index: 100;
	top: -4vw; right: -12vw;
	width: 1.8vw;
	height: 1.8vw;
	background: rgba(255,120,120,.3);
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
	color: black;
}
.header-img-container>#header-uploader-close-btn:active{
	box-shadow: 0 0 1px 0 rgba(0,0,0,.6);
}
.header-img-frame{
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 1.5vh;
	background: #FFF;
	overflow: hidden;
	z-index: 100;
}
.header-img-frame>.left-content{
	position: absolute;
	top: 0; left: 0;
	width: 70%;
	height: 100%;
	border-right: 1px solid rgba(160,175,165,.5);
	background: white;
	z-index: 100;
}
.header-img-frame>.right-content{
	position: absolute;
	top: 0; right: 0;
	width: 29.5%;
	height: 100%;
	border-left: 1px solid rgba(160,175,165,.5);
	background: white;
	z-index: 50;
}
.header-img-frame>.bottom-func-bar{
	position: absolute;
	bottom: 1%;
	left: 20%;
	width: 60%;
	height: 10%;
	z-index: 500;
}

.left-content>.url-input-widget-container{
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 20%;
	text-align: center;
}
.url-input-widget-container label{
	display: inline-block;
	margin: 5% 1% 0 0;
	padding: 0;
	width: 20%;
	height: 50%;
}
.url-input-widget-container input{
	margin-top: 10%;
	border: none;
	border-bottom: 1px solid black;
	width: 70%;
	height: 35%;
	outline-width: 0 1px 1px 1px;
	outline-style: none none ridge;
	outline-color: aquamarine;
}

.left-content>.header-img-editor-area{
	display: block;
	position: absolute;
	top: 32%; left: 5%;
	overflow: hidden;
	box-sizing: content-box;
	padding: 0;
	width: 90%;
	height: 50%;
	padding: 0;
	border: 1px solid rgb(150,160,155);
	border-radius: 5px;
}
.left-content>.header-img-editor-area-alive::after{
	position: absolute;
	content: "";
	top: 0; left: -2%;
	width: 102%;
	height: 100%;
	box-sizing: border-box;
	background: rgba(0,0,0,.5);
	-webkit-blur: brightness(.3);
	-moz-blur: brightness(.3);
	-o-blur: brightness(.3);
	blur: brightness(.3);
	z-index: 80;
}
.header-img-editor-area>#header-img-editor{
	position: relative;
	z-index: 10;
}

.header-img-editor-area>.header-shade-alive{
	position: absolute;
	top: 10%; left: 15%;
	box-sizing: border-box;
	width: 70%;
	height: 80%;
	border: 1px solid rgb(230,245,235);
	box-shadow: 0 0 5px 0 #FFF inset;
	background-color: rgba(255,255,255,.1);
	border-radius: .6vh;
	z-index: 500;
}

.right-content>.big-preview-display{
	position: relative;
	top: 5%; left: 1.3vw;
	width: 12vw;
	height: 12vw;
	box-shadow: 0 0 2px 0 rgba(0,0,0,.5);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.right-content>.small-preview-display{
	position: relative;
	margin-bottom: 50%;
	top: 12%; left: 1.5vw;
	width: 6vw;
	height: 6vw;
	border-radius: 50%;
	box-shadow: 0 0 2px 0 rgba(0,0,0,.5);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.right-content>#reset-to-default-header{
	position: absolute;
	bottom: 2%; right: calc(100% - 14vw);
	width: 5vw;
	height: 5vw;
	box-shadow: 0 0 2px 0 rgba(0,0,0,.3);
	border-radius: .6vh;
	overflow: hidden;
}
.right-content>hr{
	height: 0;
	border: none;
	border-top: 1px dotted #185598;
	opacity: .5;
}
.right-content>#reset-to-default-header:hover::after{
	position: absolute;
	top: 0; left: 0;
	box-sizing: padding-box;
	padding-top: 40%;
	content: "默认头像";
	width: 100%;
	height: 100%;
	text-align: center;
	color: skyblue;
	font-size: .8em;
	background: rgba(0,0,0,.5);
}
#reset-to-default-header>img{
	display: block;
	width: 100%;
	height: 100%;
}

.bottom-func-bar>[for='header-img-file']{
	position: absolute;
	top: 20%; left: 16%;
	padding: .5vw;
	font-size: 1vw;
	border: 1px solid rgb(156,150,146);
	border-radius: .3vw;
	cursor: pointer;
}
[for='header-img-file']>#header-img-file{ display: none; }
.bottom-func-bar>[for='header-img-file']:active,.bottom-func-bar>.btn:active{
	box-shadow: 0 0 2px 0 rgba(0,0,0,.5) inset;
}
.bottom-func-bar>.btn{
	position: absolute;
	right: 10%; top: 16%;
	text-decoration: none;
	color: black;
	font-size: 1.2vw;
	border: 1px solid rgb(156,150,146);
	padding: .5vw .75vw;
	background: #FFF;
	border-radius: .3vw;
}